<template>
  <div class="section-two">
    <div class="border-row"></div>
    <div class="border-col"></div>
    
    <div class="section-header-two">人力资源数据结构</div>

    <div :style="chartsDom">
      <header class="header" v-if="jz">
        <el-row >
          <el-col :span="8">
            <div class="header-item">
              <div class="title">总人数</div>
              <div class="value">{{Number(number.male)+Number(number.female)}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="header-item">
              <div class="title">男职员</div>
              <div class="value">{{number.male}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="header-item">
              <div class="title">女职员</div>
              <div class="value">{{number.female}}</div>
            </div>
          </el-col>
        </el-row>
        
      </header>
      <div class="container_jz"  v-if="!jz" >
                <div class="circle_jz"></div>
                <div class="circle_jz"></div>
                <div class="circle_jz"></div>
                </div>
      <main :style="mainStyle" v-if="age && education">
        <el-row class="box_tree" style="height: inherit;">
          <el-col :span="6" style="height: inherit;" v-if="jz2">
            <el-row type="flex" align="middle" style="height: inherit;">
              <div class="tree-header">年龄区间</div>
              <el-row class="tree-main" type="flex" justify="space-between" align="top">
                <div class="tree-item" v-for="(item, index) in age" :key="index">
                  <span>{{item.name}}</span>
                  <strong>{{item.value}}人({{(item.value/educationTotal*100).toFixed(2)}}%)</strong>
                </div>
              </el-row>
            </el-row>
          </el-col>
          <div class="container_jz " style="height: inherit;" v-if="!jz2" >
                <div class="circle_jz"></div>
                <div class="circle_jz"></div>
                <div class="circle_jz"></div>
                </div>
          <el-col :span="6" style="height: inherit;" v-if="jz3">
            <el-row type="flex" align="middle" style="height: inherit;">
              <div class="tree-header">学历结构</div>
              <el-row class="tree-main" type="flex" justify="space-between" align="top">
                <div class="tree-item" v-for="(item, index) in education" :key="index">
                  <span>{{item.name}}</span>
                  <strong>{{item.value}}人({{(item.value/educationTotal*100).toFixed(2)}}%)</strong>
                </div>
              </el-row>
            </el-row>
          </el-col>
          <div class="container_jz " style="height: inherit;" v-if="!jz3" >
                <div class="circle_jz"></div>
                <div class="circle_jz"></div>
                <div class="circle_jz"></div>
                </div>
          <el-col :span="6" style="height: inherit;" v-if="jz4">
            <el-row type="flex" align="middle" style="height: inherit;">
              <div class="tree-header">薪资结构</div>
              <el-row class="tree-main" type="flex" justify="space-between" align="top">
                <div class="tree-item" v-for="(item, index) in sarlary" :key="index">
                  <span>{{item.name}}</span>
                  <strong>{{item.value}}人({{(item.value/educationTotal*100).toFixed(2)}}%)</strong>
                </div>
              </el-row>
            </el-row>
          </el-col>
          <div class="container_jz " style="height: inherit;" v-if="!jz4" >
                <div class="circle_jz"></div>
                <div class="circle_jz"></div>
                <div class="circle_jz"></div>
                </div>
        </el-row>
      </main>
      <div class="no-data" v-else>暂无数据</div>
    </div>
  </div>
</template>
<script>
import { get_TalentMonitor_TotalPeople,get_TalentMonitor_Age_JobSeeker,
get_TalentMonitor_Education_JobSeeker,get_TalentMonitor_ExpectedSalary } from '@/api/data'
export default {
  data() {
    return {
      number: {},
      age: [],
      education: [],
      sarlary:[],
      jz:true,
      jz2:true,
      jz3:true,
      jz4:true
    }
  },
  props: ['height','dateProp'],
  computed: {
    chartsDom() {
      return {
        width: 2*(document.documentElement.clientWidth-30)/4-20  + 'px',
        height: this.height - 30 - 10 + 'px',
        'z-index': 100,
        position: 'relative',
      }
    },
    mainStyle() {
      return {
        width: '100%',
        height: this.height - 30 - 31 - 86 + 'px',
        // 'background-color': 'red'
      }
    },
    ageTotal() {
      return eval(this.age.map(v=>v.value).join('+')) ? eval(this.age.map(v=>v.value).join('+')) : 1;
    },
    educationTotal() {
      return eval(this.education.map(v=>v.value).join('+')) ? eval(this.education.map(v=>v.value).join('+')) : 1;
    }
  },
  mounted() {
    this.$nextTick(_=>{
      this.init();
    })
  },
  methods: {
    init() {
      this.jz=false
      this.jz2=false
      this.jz3=false
      this.jz4=false
      get_TalentMonitor_TotalPeople(this.dateProp)
      .then(({data:{data}})=>{
        this.number = data;
        this.jz=true
      });
      get_TalentMonitor_Age_JobSeeker(this.dateProp)
      .then(({data:{data}})=>{
        if(data && data.length) {
          this.age = data
          this.jz2=true
        }else{
          this.age = null
        }
      });    
      get_TalentMonitor_Education_JobSeeker(this.dateProp)
      .then(({data:{data}})=>{
        if(data && data.length) {
          this.education = data.reverse()
          this.jz3=true
        }else{
          this.education = null
        }
      });
      get_TalentMonitor_ExpectedSalary(this.dateProp)
      .then(({data:{data}})=>{
        if(data && data.length) {
          this.jz4=true
          this.sarlary = data.reverse()
        }else{
          this.sarlary = null
        }
      });
    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
  .header
    margin 15px 30px 25px
    text-align center
  .header-item
    background-color #0e3366
    margin 0 10px
    padding 5px 0
    .title
      font-size 14px
      color rgba(255, 255, 255, 0.3)
    .value
      font-size 18px
      font-weight bold
      color #8ebafb
  .tree-header
    height auto
    width 25px
    text-align center
    line-height 36px
    border 1px solid #35ced8
    color #35ced8
    padding 10px 0
    font-size 14px
    position relative
    box-sizing border-box
    &:first-child
      margin 0 0 0 5px
    &::before
      position absolute
      width 15px
      height 1px
      background-color #35ced8
      z-index 100
      content ""
      right -15px
      top 50%
  .tree-main
    width 0
    flex 1
    height 110%
    margin-left 15px
    border-left 1px solid #35ced8
    flex-direction column
  .tree-item
    position relative
    margin-left 30px
    font-size 14px
    color #ffffff
    height 20px
    line-height 20px
    white-space nowrap
    &::after
      position absolute
      left -30px
      top 50%
      width 15px
      height 1px
      background-color #35ced8
      content ""
      z-index 100
    strong
      color #35ced8
      margin-left 3px
  .box_tree
    display flex
    justify-content space-around
</style>